<template>
	<view>
		<!-- 背景圖 -->
		<image class="backImage" src="http://139.159.229.212:8889/index/fujiajia/backImage.png" mode="widthFix"></image>
		<view class="container">
			<!-- 頁面頂部 -->
			<view class="top-section">
				<!-- 城市選擇 -->
				<view class="top-title">
					<view class="city-selector" @click="onSelectCity">
						<view class="page-title">
							{{pageTitle}}
						</view>
						<image class="arrow-icon" src="/static/user/location.png"></image>
						<text class="city-name">{{cityname}}</text>
						<image class="arrow-icon1" src="/static/user/arrow_down.png"></image>
					</view>
				</view>

				<!-- 搜索框 -->
				<view class="search-index">
					<view class="search-center">
						<image class="search-icon" src="http://139.159.229.212:8889/index/fujiajia/search.png" mode="">
						</image>
						<input type="text" class="search-input" placeholder="搜索商家" />
						<view class="search-btn">
							搜索
						</view>
					</view>
				</view>
			</view>

			<!-- tab選擇 -->
			<view class="tab-content">
				<view v-for="(tab, index) in tabTitles" :key="index" class="tab-item"
					:class="{ 'active-tab': selectedTab === index }" @click="selectTab(index)">
					{{ tab }}
				</view>
			</view>

			<!-- grid分類 -->
			<view class="grid-container">
				<view class="grid-item" v-for="item in gridList">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="grid-text">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 本地生活 -->
			<view class="life-container">
				<view class="life-header">
					<view class="life-title titleCommon">
						<view class="title-name">
							本地生活
						</view>
						<view class="splite"> | </view>
						<view class="title-data">
							最高可省<text>100%</text>
						</view>
					</view>
					<view class="order-user">
						<text>u3080219</text>剛剛下單了
					</view>
				</view>

				<view class="life-grid">
					<view class="life-grid-item" v-for="item in lifeList">
						<image class="grid-item-back-image" :src="item.backImage" mode=""></image>
						<view class="item-left">
							<view class="flex">
								<image class="left-icon" src="/static/vip.png" mode=""></image>
								<view class="left-title">{{item.leftTitle}}</view>
							</view>
							<view class="left-data-money">
								{{item.leftInfo}}
							</view>
						</view>
						<view class="item-right">
							<image :src="item.rightImage" mode=""></image>
						</view>
					</view>
				</view>

				<view class="life-radio">
					<view class="radio-item" v-for="item in lifePlatformList">
						<view class="radio">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="radio-text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<!-- 附近商家 -->
			<view class="nearby-businesses">
				<view class="businesses-title titleCommon">
					<view class="title-name">
						附近商家
					</view>
					<view class="splite"> | </view>
					<view class="title-data">
						最高可省<text>100%</text>
					</view>
				</view>

				<view class="businesses-item" v-for="item in 2">
					<image class="item-left-image" src="/static/share.gif" mode=""></image>
					<view class="item-center-text">
						<view class="">
							<view class="item-title">
								十三麵包店
							</view>
							<view class="item-phone">
								<image src="http://139.159.229.212:8889/index/fujiajia/phone.png" mode=""></image>
								13063158731
							</view>
						</view>
						<view class="item-buy">
							<view class="money-box">
								<image src="http://139.159.229.212:8889/index/fujiajia/让利营销.png" mode=""></image>
							</view>
							<view class="money-data">
								讓利2%
							</view>
						</view>
					</view>
					<view class="item-right-icon">
						<image class="icon-red" src="http://139.159.229.212:8889/index/fujiajia/红包.png"
							mode="aspectFill">
						</image>
						<view class="address">
							<image class="icon-address" src="http://139.159.229.212:8889/index/fujiajia/定位.png"
								mode="aspectFill">
							</image>
							4.7km
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import tabBar from "../components/tabBar/index.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				pageTitle: "付加加",
				cityname: '厦门',
				selectedTab: 0, // 初始选中的tab索引
				tabTitles: ['热门', '休闲', '美食', '购物', '充值'],
				gridList: [{
						name: '美食',
						icon: "http://139.159.229.212:8889/index/fujiajia/编组 7.png"
					},
					{
						name: '饮品',
						icon: "http://139.159.229.212:8889/index/fujiajia/编组 6.png"
					},
					{
						name: '休闲/娱乐',
						icon: "http://139.159.229.212:8889/index/fujiajia/编组 21.png"
					},
					{
						name: '电影',
						icon: "http://139.159.229.212:8889/index/fujiajia/编组 4.png"
					},
					{
						name: '全部',
						icon: "http://139.159.229.212:8889/index/fujiajia/编组 3.png"
					},
				],
				lifeList: [{
					leftIcon: "http://139.159.229.212:8889/index/fujiajia/",
					leftTitle: "拼多多",
					leftInfo: "最高省50%",
					rightImage: "http://139.159.229.212:8889/index/fujiajia/位图.png",
					backImage: "http://139.159.229.212:8889/index/fujiajia/矩形.png"
				}, {
					leftIcon: "http://139.159.229.212:8889/index/fujiajia/",
					leftTitle: "美团",
					leftInfo: "最高省50%",
					rightImage: "http://139.159.229.212:8889/index/fujiajia/位图1.png",
					backImage: "http://139.159.229.212:8889/index/fujiajia/矩形备份 6.png"
				}, {
					leftIcon: "http://139.159.229.212:8889/index/fujiajia/",
					leftTitle: "京东",
					leftInfo: "最高省50%",
					rightImage: "http://139.159.229.212:8889/index/fujiajia/位图2.png",
					backImage: "http://139.159.229.212:8889/index/fujiajia/矩形备份 7.png"
				}, {
					leftIcon: "http://139.159.229.212:8889/index/fujiajia/",
					leftTitle: "饿了么",
					leftInfo: "最高省50%",
					rightImage: "http://139.159.229.212:8889/index/fujiajia/位图4.png",
					backImage: "http://139.159.229.212:8889/index/fujiajia/矩形备份 8.png"
				}, ],
				lifePlatformList: [{
						image: "http://139.159.229.212:8889/index/fujiajia/编组 25.png",
						title: "抖音"
					},
					{
						image: "http://139.159.229.212:8889/index/fujiajia/编组 14.png",
						title: "话费"
					},
					{
						image: "http://139.159.229.212:8889/index/fujiajia/编组 9.png",
						title: "唯品会"
					},
					{
						image: "http://139.159.229.212:8889/index/fujiajia/编组 5.png",
						title: "快递"
					},
				]
			};
		},
		methods: {
			onSelectCity() {
				uni.navigateTo({
					url: '/pages/citySelect/citySelect'
				});
			},
			selectTab(index) {
				this.selectedTab = index;
			}
		}
	}
</script>

<style lang="less" scoped>
	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.titleCommon {
		display: flex;
		align-items: center;
		padding: 0 10rpx;

		.splite {
			padding: 0 10rpx;
			color: #c8c8c8;
		}

		.title-data {
			color: #7b7b7b;

			text {
				color: rgb(237, 41, 30);
			}
		}
	}

	.container {
		padding-bottom: 178rpx;
		width: 690rpx;
		margin: auto;
		position: relative;

		.top-section {
			.top-title {
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: start;
				width: 100%;
				position: relative;

				.city-selector {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					cursor: pointer;

					.arrow-icon {
						width: 32rpx;
						height: 32rpx;
						margin: 0 10rpx;
						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(101%) contrast(101%);
					}

					.arrow-icon1 {
						width: 26rpx;
						height: 16rpx;
						margin: 0 10rpx;
						vertical-align: middle;
						margin-top: 10rpx;
						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(101%) contrast(101%);
					}

					.city-name {
						font-size: 32rpx;
						color: #000;
					}

					.page-title {
						font-size: 40rpx;
						padding-right: 10rpx;
					}
				}
			}

			.search-index {
				background-color: #fff;
				height: 72rpx;
				width: 100%;
				border-radius: 100rpx;

				.search-center {
					margin: 25rpx;
					position: relative;
					display: flex;
					align-items: center;
					height: 100%;

					.search-icon {
						width: 47rpx;
						height: 47rpx;
					}

					.search-input {
						padding-left: 10rpx;
						font-size: 28rpx;
						width: 70%;
					}

					.search-btn {
						background-color: rgb(250, 158, 73);
						color: #fff;
						padding: 12rpx 36rpx;
						border-radius: 40rpx;
						font-size: 26rpx;
						margin-left: auto;
						position: absolute;
						right: -2%;
					}
				}
			}
		}

		.tab-content {
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			padding-top: 20rpx;

			.tab-item {
				font-size: 30rpx;
				position: relative;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					bottom: -5rpx;
					left: 0;
					width: 100%;
					height: 2rpx;
					background-color: #000;
					transform: scaleX(0);
					transform-origin: center;
					transition: transform 0.3s ease;
				}
			}

			.active-tab {
				font-weight: bold;

				&::after {
					bottom: -16rpx;
					height: 8rpx;
					border-radius: 10rpx;
					transform: scaleX(1);
				}
			}
		}

		.grid-container {
			margin: 40rpx 0;
			border-radius: 26rpx;
			width: 100%;
			height: 177rpx;
			background-color: #fff;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.grid-item {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				.grid-text {
					// padding: 10rpx 0;
					margin-top: 14rpx;
					font-size: 22rpx;
				}
			}
		}

		.life-container {
			width: 100%;
			height: 734rpx;
			background-color: #fff;
			border-radius: 26rpx;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
			padding: 20rpx;

			.life-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.order-user {
					font-size: 20rpx;
					padding: 10rpx 25rpx;
					background-color: rgb(244, 242, 247);
					border-radius: 40rpx;
					color: #7b7b7b;
				}
			}

			.life-grid {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				padding: 16rpx 0;

				.life-grid-item {
					margin: 7rpx;
					width: 313rpx;
					height: 177rpx;
					background-color: #fff;
					// box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.grid-item-back-image {
						position: absolute;
						left: 0%;
						width: 100%;
						height: 100%;
					}

					.item-left {
						margin-right: 10rpx;
						z-index: 16;

						.left-icon {
							width: 44rpx;
							height: 44rpx;
							border-radius: 100%;
							margin-right: 10rpx;
						}

						.left-title {
							font-weight: bold;
						}

						.left-data-money {
							margin-top: 10rpx;
						}
					}

					.item-right {
						margin-left: 10rpx;

						image {
							width: 115rpx;
							height: 115rpx;
						}
					}
				}
			}

			.life-radio {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0;

				.radio-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.radio {
						width: 132rpx;
						height: 132rpx;
						background-color: #fff;
						box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
						border-radius: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 91rpx;
							height: 91rpx;
							border-radius: 100%;
						}
					}

					.radio-text {
						padding-top: 20rpx;
					}
				}
			}
		}

		.nearby-businesses {
			padding: 40rpx 0;

			.businesses-item {
				width: 100%;
				height: 204rpx;
				background-color: #fff;
				border-radius: 26rpx;
				margin-top: 20rpx;
				padding: 20rpx;
				display: flex;

				.item-left-image {
					width: 169rpx;
					height: 169rpx;
					border-radius: 26rpx;
				}

				.item-center-text {
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-phone {
						display: flex;
						align-items: center;
						color: #7b7b7b;
						padding-top: 14rpx;

						image {
							width: 23rpx;
							height: 23rpx;
						}
					}

					.item-buy {
						display: flex;
						align-items: center;

						.money-box {
							width: 44rpx;
							height: 44rpx;
							background-color: #ff9b45;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom-left-radius: 6rpx;
							border-top-left-radius: 6rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.money-data {
							height: 44rpx;
							width: 155rpx;
							text-align: center;
							border-bottom-right-radius: 6rpx;
							border-top-right-radius: 6rpx;
							color: #ff9b45;
							background-color: rgba(255, 155, 69, 0.2);
						}
					}
				}

				.item-right-icon {
					margin-left: auto;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.icon-red {
						width: 40rpx;
						height: 90rpx;
						margin-left: auto;
						margin-top: -10rpx;
					}

					.address {
						display: flex;
						align-items: center;
						color: #8a8a8a;

						image {
							height: 44rpx;
							width: 44rpx;

						}
					}
				}
			}
		}
	}
</style>